<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
    <!--转盘-->
    <div class="Turntable">
        <div id="panel">
            <canvas id="canvas" width="360" height="360"></canvas>
        </div>
        <div class="start" id="start">
            <span>开始</span>
        </div>
    </div>
    <!--滚动抽奖记录-->
    <div class="record_line" id="history">
        <div class="text" id="current"></div>
        <div class="text" id="next"></div>
    </div>
</div>
<!--设置-->
<div id="setting">设置奖项</div>
<div class="setting" style="visibility: hidden" id="setContainer">
    <table id="dataPanel">
        <tbody>
        <tr>
            <td>奖项</td>
            <td>图片所占比例</td>
            <td>中奖比例</td>
            <td>rgba</td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td><input type="number"></td>
            <td><input type="number"></td>
            <td><input type="text"></td>
        </tr>
        </tbody>
    </table>
    <div class="btn_group">
        <span id="add">增加一行</span>
        <span id="delete">删除尾行</span>
        <span id="ok">确定</span>
        <span id="cancel">取消</span>
    </div>
    <span>PS:这个例子数据存储在本地，保存后刷新即可，实际项目中要存入数据库</span>
</div>
<script src="js/main.js"></script>
</body>
</html>